<template>
    <div>
        <h1>高级搜索</h1>
        <div>
            <el-form :inline="true" :model="sardate" class="demo-form-inline demo-form-inline-left">
                <el-form-item label="出库单号：">
                    <el-input v-model="sardate.outWarehouseCode" placeholder="出库单号"></el-input>
                </el-form-item>
                <el-form-item label="单据类型：">
                    <el-select v-model="sardate.outWarehouseType" placeholder="请选择单据类型" clearable>
                        <el-option label="全部" :value="0" aria-checked></el-option>
                        <el-option label="销售提货出库" :value="1"></el-option>
                        <el-option label="采购退货出库" :value="2"></el-option>
                        <el-option label="调拨出库" :value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="出库单状态：">
                    <el-select v-model="sardate.state" placeholder="请选择出库状态" clearable>
                        <el-option label="全部" :value="0" aria-checked></el-option>
                        <el-option label="待审核" value="1"></el-option>
                        <el-option label="审核成功" value="2"></el-option>
                        <el-option label="审核失败" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="GetOutWarehouseDtoPes()">查询</el-button>
                    <el-button type="success" class="el-icon-plus" @click="AddHerf()">新增</el-button>
                    <el-button type="danger" plain @click="getdels()" class="el-icon-delete">删除</el-button>
                    <el-button type="info" @click="SelectOutShou()"><i class="el-icon-loading"></i>刷新</el-button>
                    <el-button @click="rform()" plain>导出</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div>
            <template>
                <el-table ref="multipleTable" :data="getoutWarehoulist" tooltip-effect="dark" style="width: 100%"
                    @selection-change="handleSelectionChange" border>
                    <el-table-column type="selection" width="55"> </el-table-column>
                    <el-table-column prop="outWarehouseCode" label="出库单号">
                    </el-table-column>
                    <el-table-column prop="productName" label="产品名称">
                    </el-table-column>
                    <el-table-column prop="productCode" label="产品编号">
                    </el-table-column>
                    <el-table-column prop="batch" label="批次"> </el-table-column>
                    <el-table-column prop="unit" label="单位"> </el-table-column>
                    <el-table-column prop="outWarehouseNumber" label="数量">
                    </el-table-column>
                    <el-table-column prop="name" label="仓库"> </el-table-column>
                    <el-table-column prop="locationName" label="库位">
                    </el-table-column>
                    <el-table-column prop="outWarehouseType" label="出库类型">
                        <template slot-scope="sc">
                            <span v-if="sc.row.outWarehouseType == 1">销售提货出库</span>
                            <span v-else-if="sc.row.outWarehouseType == 2">采购退货出库</span>
                            <span v-else>调拨出库</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="customerName" label="客户">
                    </el-table-column>
                    <el-table-column prop="creator" label="制单人"> </el-table-column>
                    <el-table-column prop="state" label="状态">
                        <template slot-scope="sc">
                            <span v-if="sc.row.state == 1">等待审核</span>
                            <span v-else-if="sc.row.state == 2">审核成功</span>
                            <span v-else>审核失败</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="reviewer" label="审核人"> </el-table-column>
                    <el-table-column prop="audittime" label="审核时间">
                        <template slot-scope="scope">
                            <span v-if="scope.row.audittime == null"></span>
                            <span v-else>{{ scope.row.audittime.substr(0, 10) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="240px">
                        <template slot-scope="scope">
                            <el-link size="mini" type="primary" @click="viewShow(scope.row.outWarehouseCode)">查看</el-link>
                            <el-link size="mini" type="warning" v-if="scope.row.state == 1"><i class="el-icon-check"
                                    @click="Approval(scope.row.outWarehouseCode)">审核</i></el-link>
                            <el-link size="mini" type="danger"><i class="el-icon-delete"
                                    @click="del(scope.row.outWarehouseCode)" v-if="scope.row.state == 1">删除</i></el-link>
                            <el-link size="mini" type="info" @click="handleEdit(scope.$index, scope.row)"><i
                                    class="el-icon-edit"
                                    @click="updout(scope.row.outWarehouseCode, scope.row.outWarehouseType)"
                                    v-if="scope.row.state == 1">编辑</i></el-link>

                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </div>
        <!-- 分页 -->
        <el-form :inline="true" class="btu">
            <el-form-item>
                共{{ page.totalCount }}条,共{{ page.pageCount }}页,当前{{ page.page }}/{{ page.page.pageCount }}页,每页显示{{ page.size
                }}条
            </el-form-item>
            <el-form-item>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="page.page" :page-sizes="[5, 10, 15, 20]" :page-size="page.size"
                    layout="sizes,slot, prev, pager, next" :total="page.totalCount" prev-text="上一页" next-text="下一页">
                    <button @click="handleCurrentChange(1)" :disabled="page.page == 1">首页</button>
                </el-pagination>
            </el-form-item>
            <el-form-item>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="page.page" :page-sizes="[5, 10, 15, 20]" :page-size="page.size" layout="slot, jumper"
                    :total="page.totalCount" prev-text="上一页" next-text="下一页">
                    <button @click="handleCurrentChange(page.pageCount)" :disabled="page.page == page.pageCount">尾页</button>
                </el-pagination>

            </el-form-item>
        </el-form>

        <el-dialog title="出库单详情" :visible.sync="dialogFormVisible" width="60%">
            <div>
                <el-form style="text-align: left">
                    <el-row :gutter="24">
                        <el-col :span="8" :offset="0">出库单号：
                            <span style="color: blue">{{
                                this.ourtlist.outWarehouseCode
                            }}</span>
                        </el-col>
                        <el-col :span="8" :offset="0">
                            出库单类型：
                            <span style="color: blue" v-if="this.ourtlist.outWarehouseType == 1">销售出库</span>
                            <span style="color: blue" v-if="this.ourtlist.outWarehouseType == 2">调拨出库</span>
                            <span style="color: blue" v-if="this.ourtlist.outWarehouseType == 3">退货出库</span>
                        </el-col>
                        <el-col :span="8" :offset="0">
                            出库状态：
                            <span style="color: blue" v-if="this.ourtlist.state == 1">等待审核</span>
                            <span style="color: blue" v-if="this.ourtlist.state == 2">审核成功</span>
                            <span style="color: blue" v-if="this.ourtlist.state == 3">审核驳回</span>

                        </el-col>
                    </el-row>
                    <el-row :gutter="24">
                        <el-col :span="8" :offset="0">
                            客户编号：
                            <span style="color: blue"> {{ this.ourtlist.customrCode }}</span>
                        </el-col>
                        <el-col :span="8" :offset="0">
                            客户名称：
                            <span style="color: blue">
                                {{ this.ourtlist.customerName }}</span>
                        </el-col>
                        <el-col :span="8" :offset="0">
                            联系人：
                            <span style="color: blue">{{ this.ourtlist.contract }} </span>
                        </el-col>
                    </el-row>
                    <el-row :gutter="24">
                        <el-col :span="8" :offset="0">
                            电话：
                            <span style="color: blue"> {{ this.ourtlist.phone }}</span>
                        </el-col>
                        <el-col :span="8" :offset="0">
                            制单人：
                            <span style="color: blue">{{ this.ourtlist.creator }} </span>
                        </el-col>
                        <el-col :span="8" :offset="0">
                            制单日期：
                            <span style="color: blue">{{ this.ourtlist.createTime }} </span>
                        </el-col>
                    </el-row>
                    <el-row :gutter="24">
                        <el-col :span="8" :offset="0">
                            备注：
                            <span style="color: blue"> {{ this.ourtlist.remarks }}</span>
                        </el-col>
                        <el-col :span="8" :offset="0">
                            审核日期：
                            <span style="color: blue"> {{ this.ourtlist.audittime }}</span>
                        </el-col>
                        <el-col :span="8" :offset="0">
                            审核原因：
                            <span style="color: blue"> {{ this.ourtlist.opinion }}</span>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <template>
                <el-table :data="OutWarehouseDetailDtoPasList" border style="width: 100%">

                    <el-table-column prop="productName" label="产品名称">
                    </el-table-column>
                    <el-table-column prop="productCode" label="产品编码">
                    </el-table-column>
                    <el-table-column prop="specs" label="规格">
                    </el-table-column>
                    <el-table-column prop="batch" label="批次">

                    </el-table-column>
                    <el-table-column prop="price" label="单价">
                    </el-table-column>
                    <el-table-column prop="outWarehouseNumber" label="出库数">
                    </el-table-column>
                    <el-table-column label="总价">
                        <template slot-scope="sc">
                            {{ sc.row.price * sc.row.outWarehouseNumber }}
                        </template>
                    </el-table-column>
                    <el-table-column label="库位">
                        <template slot-scope="sc">
                            {{ sc.row.name }}{{ sc.row.locationName }}
                        </template>
                    </el-table-column>
                </el-table>
            </template>

        </el-dialog>

        <el-dialog title="出库单审核" :visible.sync="dialogFormVisibles" width="60%">
            <div>
                <el-form style="text-align: left">
                    <el-row :gutter="24">
                        <el-col :span="8" :offset="0">出库单号：
                            <span style="color: blue">{{
                                this.ourtlist.outWarehouseCode
                            }}</span>
                        </el-col>
                        <el-col :span="8" :offset="0">
                            出库单类型：
                            <span style="color: blue" v-if="this.ourtlist.outWarehouseType == 1">销售出库</span>
                            <span style="color: blue" v-if="this.ourtlist.outWarehouseType == 2">调拨出库</span>
                            <span style="color: blue" v-if="this.ourtlist.outWarehouseType == 3">退货出库</span>
                        </el-col>
                        <el-col :span="8" :offset="0">
                            出库状态：
                            <span style="color: blue" v-if="this.ourtlist.state == 1">等待审核</span>
                            <span style="color: blue" v-if="this.ourtlist.state == 2">审核成功</span>
                            <span style="color: blue" v-if="this.ourtlist.state == 3">审核驳回</span>
                        </el-col>
                    </el-row>
                    <el-row :gutter="24">
                        <el-col :span="8" :offset="0">
                            客户编号：
                            <span style="color: blue"> {{ this.ourtlist.customrCode }}</span>
                        </el-col>
                        <el-col :span="8" :offset="0">
                            客户名称：
                            <span style="color: blue">
                                {{ this.ourtlist.customerName }}</span>
                        </el-col>
                        <el-col :span="8" :offset="0">
                            联系人：
                            <span style="color: blue">{{ this.ourtlist.contract }} </span>
                        </el-col>
                    </el-row>
                    <el-row :gutter="24">
                        <el-col :span="8" :offset="0">
                            电话：
                            <span style="color: blue"> {{ this.ourtlist.phone }}</span>
                        </el-col>
                        <el-col :span="8" :offset="0">
                            制单人：
                            <span style="color: blue">{{ this.ourtlist.creator }} </span>
                        </el-col>
                        <el-col :span="8" :offset="0">
                            制单日期：
                            <span style="color: blue">{{ this.ourtlist.createTime }} </span>
                        </el-col>
                    </el-row>
                    <el-row :gutter="24">
                        <el-col :span="8" :offset="0">
                            备注：
                            <span style="color: blue"> {{ this.ourtlist.remarks }}</span>
                        </el-col>
                        <el-col :span="8" :offset="0">
                            审核日期：
                            <span style="color: blue"> {{ this.ourtlist.audittime }}</span>
                        </el-col>
                        <el-col :span="8" :offset="0">

                        </el-col>
                    </el-row>
                    <el-row :gutter="24">
                        <el-col :span="8" :offset="0">
                            审核原因：
                            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="ourtlist.remarks">
                            </el-input>
                        </el-col>

                    </el-row>

                </el-form>
            </div>

            <template>
                <el-table :data="OutWarehouseDetailDtoPasList" border style="width: 100%">

                    <el-table-column prop="productName" label="产品名称">
                    </el-table-column>
                    <el-table-column prop="productCode" label="产品编码">
                    </el-table-column>
                    <el-table-column prop="specs" label="规格">
                    </el-table-column>
                    <el-table-column prop="batch" label="批次">

                    </el-table-column>
                    <el-table-column prop="price" label="单价">
                    </el-table-column>
                    <el-table-column prop="outWarehouseNumber" label="出库数">
                    </el-table-column>
                    <el-table-column label="总价">
                        <template slot-scope="sc">
                            {{ sc.row.price * sc.row.outWarehouseNumber }}
                        </template>
                    </el-table-column>
                    <el-table-column label="库位">
                        <template slot-scope="sc">
                            {{ sc.row.name }}{{ sc.row.locationName }}
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="Approvals(2)">审批</el-button>
                <el-button type="primary" @click="Approvals(3)">不审批</el-button>
                <el-button @click="dialogFormVisibles = false">取 消</el-button>

            </div>
        </el-dialog>

    </div>
</template>

<script>
// 引入signalr,注意，因版本原因项目中不引用这句话，否则报错
const signalR = require("@microsoft/signalr");
import { GetOutWarehouseDtoPes, GetViewOutWarehouse, UpdateStateOutWare, DelOutWare, DeleteOutWare } from "@/api/WarehouseServer/outWarehouseServers";
export default {

    data() {
        return {
            dialogFormVisible: false,
            multipleSelection: [],
            getoutWarehoulist: [],
            sardate: {
                outWarehouseCode: "",
                outWarehouseType: 0,
                state: 0,
            },
            page: {
                page: 1,
                size: 5,
                totalCount: 0,
                pageCount: 0,
            },
            ourtlist: {
                id: "",
                outWarehouseCode: "",
                outWarehouseType: "",
                state: "",
                customrCode: "",
                customerName: "",
                contract: "",
                phone: "",
                creator: "",
                createTime: "",
                remarks: "",
                audittime: "",
                opinion: "",
            },
            OutWarehouseDetailDtoPasList: [],
            dialogFormVisibles: false,

            connection: null,
            msgs: [],
            dataInfo: "",
        };
    },

    methods: {
        //分页
        handleCurrentChange(val) {
            this.page.page = val;
            this.GetOutWarehouseDtoPes();
        },
        handleSizeChange(val) {
            this.page.size = val;
            this.GetOutWarehouseDtoPes();
        },

        //批量删除
        getdels() {
            if (this.multipleSelection.length == 0) {
                this.$message({
                    message: '请选择要删除的数据',
                    type: 'warning'
                });
                return
            }
            this.$confirm('此操作将永久批量删除该文件?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                DeleteOutWare(this.multipleSelection).then((res) => {
                    if (res.data.code == 0) {
                        this.$message({
                            message: "批量删除成功",
                            type: "success",
                        });
                        this.page.page = 1;
                        this.GetOutWarehouseDtoPes();
                    } else {
                        this.$message({
                            message: "批量删除失败",
                            type: "success",
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消批量删除'
                });
            });
        },
        //单位删除
        del(id) {
            var myparams = {
                outWarehouseCode: id,
            }
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                DelOutWare(myparams).then((res) => {
                    if (res.data.code == 0) {
                        this.$message({
                            message: "删除成功",
                            type: "success",
                        });
                        this.page.page = 1;
                        this.GetOutWarehouseDtoPes();
                    } else {
                        this.$message({
                            message: "删除失败",
                            type: "success",
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        //审批
        Approvals(num) {
            var mydata = {
                outWarehouseCode: this.ourtlist.outWarehouseCode,
                reviewer: sessionStorage.getItem("encode"),
                state: num,
                opinion: this.ourtlist.remarks,
            };
            console.log(mydata);
            UpdateStateOutWare(mydata).then((res) => {
                if (res.data.code == 0) {
                    this.$message({
                        message: "审批成功",
                        type: "success",
                    });
                    this.dialogFormVisibles = false;
                    this.receiveMessage();
                    this.GetOutWarehouseDtoPes();
                } else {
                    this.$message({
                        message: "审批库存不足请查看消息",
                        type: "error",
                    });
                }
            });
        },
        //多选
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //出库列表
        GetOutWarehouseDtoPes() {
            var data = {
                outWarehouseType: this.sardate.outWarehouseType || 0,
                state: this.sardate.state || 0,
                outWarehouseCode: this.sardate.outWarehouseCode,
                page: this.page.page,
                size: this.page.size,
            };
            GetOutWarehouseDtoPes(data).then((res) => {
                console.log(111, res);
                this.getoutWarehoulist = res.data.data;
                this.page.totalCount = res.data.totalCount;
                this.page.pageCount = res.data.pageCount;
            });
        },
        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            console.log(index, row);
        },
        //查看详情
        viewShow(row) {
            this.dialogFormVisible = true;
            this.GetViewOutWarehouse(row);
        },
        //审批查看
        Approval(id) {
            console.log(11111)
            this.dialogFormVisibles = true;
            this.GetViewOutWarehouse(id);
        },
        //查详情
        GetViewOutWarehouse(row) {
            var mydata = {
                outWarehouseCode: row,
            };
            GetViewOutWarehouse(mydata).then((res) => {
                console.log(res);
                this.ourtlist = res.data.data;
                console.log(111, this.ourtlist);
                this.OutWarehouseDetailDtoPasList = res.data.data.outWarehouseDetailDtoPas;
                console.log(111, this.OutWarehouseDetailDtoPasList);
            })
        },
        //添加跳转
        AddHerf() {
            this.$router.push("/WarehouseManage/outWarehouseMange/outWarehouseAdd");
        },
        updout(id, state) {
            //跳转修改
            this.$router.push("/WarehouseManage/outWarehouseMange/outWarehouseUpd?id=" + id + "&state=" + state);
        },


        initsignalr() {
            // 建立连接
            this.connection = new signalR.HubConnectionBuilder()
                .withUrl("http://localhost:63626/chatHub")
                .withAutomaticReconnect()
                .build();

            // 注册方法
            this.connection.on("ShowMsg", this.ShowMsg);

            // 开始连接
            this.connection
                .start()
                .then(() => console.log("Connected!"))
                .catch((err) => {
                    console.log(err);
                });
        },

        ShowMsg(msgInfo) {
            console.log(11, msgInfo);
            this.msgs.push(msgInfo + "--" + (this.msgs.length + 1));
        },

        // 调用后端方法
        receiveMessage() {
            this.$store.state.snm++;
            let params = "Hello";
            this.connection
                .invoke("SendMessage", params)
                .then(() => console.log("send succeed!"));
        },
    },
    mounted() {
        this.GetOutWarehouseDtoPes();
    },
    created() {
        this.initsignalr();
    },
};
</script>

<style>
.btu {
    margin-top: 100px;
}

.demo-form-inline-left {
    text-align: left;
}
</style>